<template>
  <div class="pl-30 pr-30 pb-30 h100 flex-v ">
   <div class="title"> <img class="mb-20" src="@/assets/img/login-title.png"></img>
  </div>
  <div class="main flex-h flex-wrap flex-1">
    <!-- ai 对话 -->
    <ul class="flex-v" v-if="navVisivle('AI 办公室')">
      <li class="card-title flex-h flex-hv-center flex-between">
        <div class="flex-h flex-hv-center">
          <i class="iconfont icon-aiduihua liner-text mr-15 ft-30"></i>
          <h3 class="liner-text ft-25">AI  对话</h3>
        </div>
        <i class="iconfont icon-gengduo  ft-16" @click="cardClickHandler('AI 对话')"></i>
      </li>
    <div class="chat flex-1 over-auto pr-10">
      <template v-for="item in  welcomeData.chat">
      <div class="flex-h ">
        <img class="avatar" src="http://ai.jiyundata.cn/jlntv/static/image-avatar-user.jpg" alt="User">
        <p class="prompt">{{item.prompt}}</p>
      </div>
      <div class="flex-h">
          <!-- <img class="avatar" src="http://ai.jiyundata.cn/jlntv/static/2024/12/24/微信图片_20241224141957.jpg" alt="ChatGPT"> -->
       <div>
        <!-- <p class="replay">
          关于自律，这里有一些建议、名言和谚语：
          明智的建议：每天设定一个明确的目标，并制定实现目标的计划。遵循计划，不断地审视自己的进步，并调整计划以适应变化的环境。
        </p> -->
        <div class="icon-box flex-h mt-10">
          <!-- <div class="flex-h flex-center"><i class="iconfont icon-chakan"></i>查看全部</div> -->
          <div class="flex-h flex-center ml-20" @click="askHandler(item.prompt)"><i class="iconfont icon-fabu"></i>我也要问</div>
        </div>
       </div>
      </div>
      <div class="line"></div>
     </template>
    </div>
    </ul>
    <!--绘画 -->
    <ul class="flex-v" v-if="navVisivle('AI 绘画社')">
      <li class="card-title flex-h flex-hv-center flex-between">
        <div class="flex-h flex-hv-center">
          <i class="iconfont icon-AIhuihuashe liner-text mr-15 ft-30"></i>
          <h3 class="liner-text ft-25">AI  绘画</h3>
        </div>
        <i class="iconfont icon-gengduo  ft-16" @click="cardClickHandler('AI 绘画')"></i>
      </li>
    <div class="huihua w100  flex-1 over-h h100">
      <div class="huihua-top posr flex-h"  >
        <div class="huihua-top-img_box posr" v-for="(item,i) in welcomeData.imgTop"  @click="imgClickHandler(item)">
          <img :src="item.url" alt="">
          <div class="mask">
            <div class="flex-h flex-hv-center mb-5">
              <img  src="http://ai.jiyundata.cn/jlntv/static/image-avatar-user.jpg" alt="User">
              <h3 class="ml-10">{{ item.title }}</h3>
            </div>
            <p class="media-text">{{ item.text }}</p>
          </div>
        </div>
      </div>
     <div class="line-box flex-v flex-center">
       <div class="line"></div>
     </div>
      <div class="huihua-bottom posr flex-h">
        <div class="huihua-bottom-img_box posr" v-for="(item,i) in welcomeData.imgBottom"  @click="imgClickHandler(item)">
          <img :src="item.url" alt="">
          <div class="mask">
             <div class="flex-h flex-hv-center mb-5">
              <img  src="http://ai.jiyundata.cn/jlntv/static/image-avatar-user.jpg" alt="User">
              <h3 class="ml-10">{{ item.title }}</h3>
            </div>
            <p  class="media-text">{{ item.text }}</p>
          </div>
        </div>
      </div>
    </div>
    </ul>
     <!--音乐 -->
     <ul class="flex-v" v-if="navVisivle('AI 音乐坊')" >
      <li class="card-title flex-h flex-hv-center flex-between">
        <div class="flex-h flex-hv-center">
          <i class="iconfont icon-AIyinlefang liner-text mr-15 ft-30"></i>
          <h3 class="liner-text ft-25">AI  音乐</h3>
        </div>
        <i class="iconfont icon-gengduo  ft-16" @click="cardClickHandler('AI 音乐')"></i>
      </li>
    <div class="yinyue w100  flex-1 over-h h100">
      <div v-for="(music,index) in welcomeData.music" @click="musicClickHandler(music,index)"class="flex-h yinyue-box flex-h cursor">
        <li class="yinyue-left">
          <img :src="music.imageUrl" alt="" srcset="">
        </li>
        <li class="yinyue-right ml-20 flex-1 flex-v flex-between over-h">
          <h4 class="!text-4">{{ music.title }}</h4>
          <!-- <span>music.tags   <span class="ml-20">{{ formatTime(music.duration) }}</span></span> -->
          <p class="text-ellipsis w100">
            {{music.prompt}}
          </p>
        </li>
      </div>
    </div>
    </ul>
     <!--视频 -->
     <ul class="flex-v" v-if="navVisivle('AI 视频站')" >
      <li class="card-title flex-h flex-hv-center flex-between">
        <div class="flex-h flex-hv-center">
          <i class="iconfont icon-AIshipinzhan liner-text mr-15 ft-30"></i>
          <h3 class="liner-text ft-25">AI  视频</h3>
        </div>
        <i class="iconfont icon-gengduo  ft-16" @click="cardClickHandler('AI 视频')"></i>
      </li>
    <div class="shipin w100 flex-h  flex-1 over-h h100">
        <div class="shipin-box flex-v flex-between h100 over-h"  v-for="(shipin,index) in welcomeData.video">
          <div class="posr video-top">
            <VideoPlayer
      :src="shipin.videoUrl"
      :options="playerOptions"
      :autoplay="false"
    ></VideoPlayer>
    <div class="mask" @click="videoClickHandler(shipin)"></div>
          </div>
          <div class="flex-h flex-hv-center mt-10 mb-10 flex-1">
            <img class="avatar" src="http://ai.jiyundata.cn/jlntv/static/image-avatar-user.jpg" alt="User" data-v-e4731dd0="">
            <p>{{ shipin.title }}</p>
          </div>
          <p class="flex-1 media-text">{{ shipin.prompt }}</p>
          
        </div>
    </div>
    </ul>

      <!--工具箱 -->
      <ul class="flex-v bottom-shadow posr" v-if="navVisivle('AI 工具箱')"  @click="cardClickHandler('AI 工具')">
      <li class="card-title flex-h flex-hv-center flex-between">
        <div class="flex-h flex-hv-center">
          <i class="iconfont icon-AIgongjuxiang liner-text mr-15 ft-30"></i>
          <h3 class="liner-text ft-25">AI 工具箱</h3>
        </div>
        <i class="iconfont icon-gengduo  ft-16"></i>
      </li>
    <div class="gjx w100 flex-h flex-wrap flex-1 over-auto">
        <div class="gjx-box flex-h flex-hv-center" v-for="gjx in toolsData">
          <img class="lazy unfancybox loaded mr-10" :src="gjx.img">
          <div class="w100 over-h">
            <span>{{ gjx.title }}</span>
            <p class="text-ellipsis w100 mt-5">{{ gjx.text }}</p>
          </div>
        </div>
    </div>
    </ul>

     <!--更多 -->
     <ul class="flex-v flex-center">
      <i class="iconfont icon-hourglass liner-text mb-10 ft-16"></i>
      <h3 class="liner-text ft-14">更多应用敬请期待…</h3>
    </ul>
  </div>
  <WelcomeDialog :songIndex="songIndex" :imgPath=imgPath ref="WelcomeDialogRef" :musicPath=musicPath :videoPath="videoPath"  @success=infoCreate></WelcomeDialog>
  </div>
</template>

<script setup>
import FooterBar from "@/components/FooterBar.vue";
import { httpGet } from "@/utils/http";
import { ElMessage } from "element-plus";
import { isMobile } from "@/utils/libs";
import { useUserStore } from "@/store/user";
import { storeToRefs } from "pinia";
import WelcomeDialog from "@/components/welcomeDialog.vue";
import welcomeData from "@/views/json/welcome.js"
import { formatTime } from "@/utils/libs";
import { VideoPlayer } from "@videojs-player/vue";
const userStore = useUserStore();

let {  getMenu } = storeToRefs(userStore);
const homeMenu  = computed(()=>{
  return getMenu.value?.homePageMenus || []
})
let playerOptions = ref({
  height: 1100,
  // width: document.documentElement.clientWidth, //播放器宽度
  playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
  muted: false, // 默认情况下将会消除任何音频。
  loop: false, // 导致视频一结束就重新开始。
  preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
  language: "zh-CN",
  aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
  fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
  notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
  controls: true,
  controlBar: {
    timeDivider: true,
    durationDisplay: true,
    remainingTimeDisplay: false,
    fullscreenToggle: true, // 全屏按钮
  },
});
const menusRaw  = computed(()=>{
  return getMenu.value?.menus || []
})
const navVisivle = (name) => {
  return homeMenu.value.includes(name)
}
const router = useRouter();
function findItemsByName(menu, selectedName) {
  let result = [];

  function traverse(items) {
    if (!items || !Array.isArray(items)) return;

    for (let item of items) {
      if (item.name === selectedName) {
        result.push(item);
      }
      if (item.children && item.children.length > 0) {
        traverse(item.children);
      }
    }
  }

  traverse(menu);
  return result;
}
const cardClickHandler = (navName) => {
  const matchedItems = findItemsByName(menusRaw.value, navName);
  if (!matchedItems?.length) {
    ElMessage.error('导航路径未找到')
    return
  }
console.log(matchedItems);
  // console.log('findPath :>> ', findPath);
let matchedPath =  matchedItems[0].path
  if (matchedPath.indexOf("http") !== -1) {
    // 外部链接
    window.open(matchedPath);
  } else {
    router.push(matchedPath);
  }
}
const WelcomeDialogRef =ref("")
const imgPath =ref("")
const videoPath =ref("")
const musicPath =ref("")
const songIndex =ref("")

const imgClickHandler = (item) => {
  imgPath.value = item.url 
  WelcomeDialogRef.value.open('/mj')
}
const musicClickHandler = (item,i) => {
  musicPath.value = welcomeData.music 
  songIndex.value=i
  WelcomeDialogRef.value.open('/aiMusic')
}
const videoClickHandler = (item) => {
  videoPath.value = item.videoUrl 
  WelcomeDialogRef.value.open('/video')
}
if (isMobile()) {
  router.push("/mobile");
}

const toolsData =reactive([{
  img:"https://ai-bot.cn/wp-content/uploads/2023/08/zhipu-ai-chatglm-icon.png",
  title:"智谱清言",
  text:'免费全能的AI助手，支持AI绘画、视频生成'
},{
  img:"https://ai-bot.cn/wp-content/uploads/2024/12/doudou-logo.png",
  title:"逗逗",
  text:'AI游戏陪玩，支持原神、黑神话、LOL！'
},{
  img:"https://ai-bot.cn/wp-content/uploads/2023/08/doubao-icon.png",
  title:"豆包",
  text:'字节跳动推出的免费AI智能助手'
},{
  img:"https://ai-bot.cn/wp-content/uploads/2023/07/d-design-ai-icon.png",
  title:"堆友AI",
  text:'阿里旗下堆友推出的多风格AI绘画生成器'
},{
  img:"https://ai-bot.cn/wp-content/uploads/2023/04/meitu-ai-ppt.jpg",
  title:"美图设计室",
  text:'AI图像创作和设计平台'
},{
  img:"https://ai-bot.cn/wp-content/uploads/2024/09/yizhentv-logo.png",
  title:"秒创",
  text:'免费AI视频创作工具，支持图文生视频、PPT生视频'
}]);
const askHandler = (text) => {
  console.log('text :>> ', text);
  router.push(`chat?t=${text}`)
  // router.push({
  //   path: "/chat",
  //   query: { text }
  // })
}
const infoCreate = (path) => {
  console.log('path :>> ', path);
  router.push(path);
}
onMounted(() => {
});
</script>

<style lang="scss" scoped>
img{
  // object-fit: cover;
}
@media screen and (max-width: 1536px) {
  .media-text{
    display: none
  }
  
}
.bottom-shadow::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70px; /* 渐变阴影的高度 */
  background: var(--welcome-box-shadow);
  z-index: 1;
}
.title {
  width: 50%;
  img{
    width: 100%;
  }
}
.avatar {
      width: 25px;
      height: 25px;
      border-radius: 50%;
      margin-right: 10px;
}
.main{
  overflow: hidden;
  .line{
    height: 1px;
    width: 100%;
    background: var(--line-bg);
    margin: 10px 0;
  }
  ul{
    width: 31%;
    height: calc(50% - 20px - 1%);
    overflow: hidden;
    margin:1%;
    padding: 0.8rem;
  }
  ul:not(:last-child){
    border-radius: 16px 16px 16px 16px;
    border: 2px solid var(--card-border);
    background:var(--card-bg);
    box-shadow: 0 0 20px 0px rgb(193 193 193 / 20%);
    .card-title{
      margin-bottom: 1rem;
    }
    .icon-gengduo{
      color: #6d728a;
      cursor: pointer;
    }
  }
  .chat{
    .icon-box{
      i{
        margin-right: 5px;
      }
      *{
        font-size: 12px;
        cursor: pointer;
        color: #7D839C
      }
    }
    p{
      padding: 0;
      line-height: 1.5;
      font-size: 12px;
      &.prompt{
        color:var(--prompt-text-color)
      }
      &.replay{
        color: var(--replay-text-color);
      }
    }
  }
  .huihua{
    .huihua-top,.huihua-bottom{
      height: 41%;
      .huihua-top-img_box{
        width: 50%;
        margin:0px 10px;
        &:hover  .mask{
        display: block
      }
      }
      .huihua-bottom-img_box{
        width: 33%;
        margin:0px 10px;
         &:hover  .mask{
        display: block
      }
      }
      img{
        cursor: pointer;
        width: 100%;
        height: 100%;
        border-radius: 15px;
        object-fit: cover;
      }
    }
    .line-box{
      height: 18%;
      .line{
        margin:0;
      }
    }
    .mask{
      cursor: pointer;
      display: none;
      padding: 10px;
      border-radius: 15px;
      background: rgba(0, 0, 0, 0.6);
      position: absolute;
      left: 0;
      right: 0;
      bottom:0;
      top:0;
      img{
        width:20px;
      }
      h3{
        color: #a3a2c9;
        font-size: 12px;
        font-weight: normal
      }
      p{
        color: #a3a2c9;
        font-size: 10px;
      }
    }
  }
  .yinyue{
    .yinyue-box{
      margin-bottom: 3%;
      height: 27.5%;
      width: 100%;
    }
    .yinyue-left{
      img{
        width: 70px;
        height: 100%;
        object-fit: cover;
        border-radius: 8px 8px 8px 8px;
      }
    }
    .yinyue-right{
      *{
        color:  var(--music-text-color);
        font-size: 12px;
      }
    }
  }
  .shipin{
    .video-top{
      // height: 60%;
      overflow: hidden;
      img{
        height: 100%;
        object-fit: cover;
      }
      .mask{
        width: 100%;
        height: 100%;
        position: absolute;
        background: rgba(0, 0, 0, 0.1);
        z-index: 1;
        top: 0;
        left: 0;
        cursor: pointer;
      }
    }
    .shipin-box{
      width: 50%;
      *{
        font-size: 12px;
      }
      p{
        color:  var(--music-text-color);
        font-size: 12px;
      }
      &+.shipin-box{
        margin-left: 20px;
      }
    }
  }
  .gjx{
    .gjx-box{
      cursor: pointer;
      width: calc(50% - 15px);
      background:  var(--tool-card-bg);
      border-radius: 8px;
      padding: 20px;
      margin: 10px 0;
      &:nth-child(2n){
        margin-left: 20px;
        margin-right: 10px;
      }
      span{
        color: #fff;
        font-size: 14px
      }
      p{
        color:  var(--music-text-color);
        font-size: 12px;
      }
    }
    img{
      width: 39px;
      height: 39px;
    }
  }
}
</style>
